<!-- 绑定小区 -->
<template>
	<view class="boxcss">
		<view class="mainbox">
			<view v-if="list.length > 0" class="mainbox_listbox">
				<view v-for="(item,index) in list" :key="index" class="mainbox_listbox_li" @click="isClick(item)">
					<MyRichText :content="item.communityName" :keys="isSearch" :color="'#FF7639'" :weight="true" />
				</view>
			</view>
			<view v-if="list.length == 0" class="mainbox_nolistbox">
				<image src="https://llq.wanhedashuju.com/uploads/20241120/01a6aaf127838b46a858f8c612c8dc44.png"
					class="mainbox_nolistbox_icon"></image>
				<text class="mainbox_nolistbox_h">暂未搜到您所在的小区</text>
			</view>
		</view>
	</view>
</template>

<script>
	import MyRichText from '@/components/m-richText'
	import * as index from '@/api/index.js'
	export default {
		components: {
			MyRichText
		},
		data() {
			return {
				locationCity: '',
				list: [],
				join: 0,
				isSearch:''
			}
		},
		onLoad(e) {
		},
		onShow() {
			this.getLocationCity()
			this.isSearch = uni.getStorageSync('isSearch')
		},
		methods: {
			getLocationCity() {
				index.communityList().then(res=>{
					console.log(res)
					this.list = res.list
				})
			},
			//输入时
			searchInput(e) {
				if (e.detail.value.length > 1) {
					home.getResidential({
						name: e.detail.value
					}).then(res => {
						this.list = res.data
						// console.log(this.list);
					})
				} else {
					this.list = []
				}
			},
			//选择小区
			isClick(e) {
				this.$tools.toast('绑定成功～')
				uni.setStorageSync('isSearch',e.communityName)
				uni.setStorageSync('communityId',e.id)
				setTimeout(() => {
					// uni.navigateBack(-1)
					uni.switchTab({
						url: '/pages/home/index'
					})
				}, 1000)
				// index.userUpdate({userId:this.userId,communityId:e.id}).then(res=>{
					
				// })
				
			},
			//更新用户信息
			getUserInfo() {
				home.getUserInfo().then(res => {
					uni.setStorageSync('UserInfo', res.data)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.boxcss {
		height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: rgb(248, 248, 248);
		position: relative;

		.clo1 {
			padding: 18rpx 30rpx;
			background: #fef0f0;
		}

		.clo2 {
			padding: 26rpx 30rpx;
			background: rgb(255, 237, 242);
		}

		.padtcss {
			padding-top: 169rpx;
		}

		.mainbox {
			margin-top: 100rpx;
			padding-bottom: env(safe-area-inset-bottom);

			&_listbox {
				display: flex;
				flex-direction: column;

				&_li {
					padding: 26rpx 50rpx;
					font-size: 28rpx;
					color: #333;
					border-bottom: 2rpx solid #f8f8f8;
					background: #fff;
				}
			}

			&_nolistbox {
				height: calc(100vh - 169rpx - env(safe-area-inset-bottom));
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&_icon {
					width: 260rpx;
					height: 267rpx;
				}

				&_h {
					margin-top: 70rpx;
					color: rgb(27, 27, 43);
					font-size: 28rpx;
				}
			}
		}

		.topbox {
			z-index: 9;
			width: 750rpx;
			// height: 169rpx;
			background: #fff;
			position: fixed;
			/* #ifdef H5 */
			top: 90rpx;
			/* #endif */

			/* #ifdef APP-PLUS || MP-WEIXIN */
			top: 0rpx;
			/* #endif */
			left: 0;
		}

		.noticebox {
			width: 690rpx;
			color: rgb(234, 54, 103);
			font-size: 24rpx;

			&_h {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: left;
			}

			&_btnbox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&_h {
					color: #fa3534;
				}

				&_btn {
					padding: 8rpx 25rpx;
					border-radius: 50rpx;
					font-size: 24rpx;
					font-weight: 500;
					background: #fff;
					color: #333;
				}
			}
		}

		.searchbox {
			background: #fff;
			padding: 12rpx 30rpx;

			&_inputbox {
				padding: 15rpx 24rpx;
				border-radius: 51rpx;
				background: rgb(248, 248, 248);
				display: flex;
				align-items: center;
				justify-content: space-between;

				&_icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}

				&_inpt {
					width: 100vw;
					padding: 0;
					color: #333;
					font-size: 24rpx;
					font-weight: 400;
				}

				::v-deep .placeholdercss {
					color: rgb(153, 153, 153);
					font-size: 24rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>